var H5ComponentPolyline = function (name, cfg) {
    var component = new H5ComponentBase(name, cfg);
    var w = cfg.width;
    var h = cfg.height;
    var cns = document.createElement('canvas');
    var ctx = cns.getContext('2d');
    cns.width = ctx.width = w;
    cns.height = ctx.height = h;

    var step = 10;
    ctx.beginPath();
    ctx.lineWidth = 1;
    window.ctx = ctx;
    for (let i = 0; i < step + 1; i++) {
        var y = (h / step) * i;
        ctx.moveTo(0, y);
        ctx.lineTo(w, y);
    }
    step = cfg.data.length + 1;
    var text_w = w / step >> 0;
    for (let i = 0; i < step + 1; i++) {
        var x = (w / step) * i;
        ctx.moveTo(x, 0);
        ctx.lineTo(x, y);
        if (cfg.data[i]) {
            var text = $('<div class="text">')
            text.text(cfg.data[i][0]);
            text.css('width', text_w / 2).css('left', (x / 2 - text_w / 4) + text_w / 2)
            component.append(text)
        }
    }
    ctx.stroke();
    component.append(cns)
    var draw = function (per) {
        ctx.clearRect(0,0,w,h);
        ctx.beginPath();
    for (let i = 0; i < step + 1; i++) {
        var y = (h / step) * i;
        ctx.moveTo(0, y);
        ctx.lineTo(w, y);
    }
        ctx.lineWidth = 1;
        ctx.strokeStyle = '#ff8878';
        var x = 0;
        var y = 0;
        // step = cfg.data.length + 1;
        // v
        var row_w = (w / (cfg.data.length + 1));
        for (i in cfg.data) {
            var item = cfg.data[i];
            x = row_w * i + row_w;
            // y = h * (1 - item[1]*h*per);
            y=h-(item[1]*h*per)
            console.log('11', item, x, y);
            ctx.moveTo(x, y);
            ctx.arc(x, y, 5, 0, 2 * Math.PI);
        }
        ctx.moveTo(row_w, h-(cfg.data[0][1]*h*per));
        // ctx.arc(row_w,h*(1-cfg.data[0][1]),10,0,2*Math.PI);
        for (i in cfg.data) {
            var item = cfg.data[i];
            x = row_w * i + row_w;
            y=h-(item[1]*h*per)
            ctx.lineTo(x, y);
        }
        ctx.stroke();
        ctx.lineWidth = 1;
        ctx.strokeStyle = 'rgba(255,136,255,0.2)'
        ctx.lineTo(x, h);
        ctx.lineTo(row_w, h);
        ctx.fillStyle = 'rgba(255,136,120,0.37)'
        ctx.fill();

        for (i in cfg.data) {
            var item = cfg.data[i];
            x = row_w * i + row_w;
            // y = h * (1 - item[1]);
            y=h-(item[1]*h*per)
            ctx.fillStyle = item[2] ? item[2] : '#595959'
            ctx.moveTo(x, y);
            console.log('item', item);
            ctx.fillText((item[1] * 100) + '%', x - 10, y - 10);
        }
    }
    // draw(.9)
    ctx.stroke();
    component.on('onLoad', function () {
        //折线图生长动画
        var s=0;
        for(i=0;i<100;i++){
            setTimeout(() => {
                s += .01;
                draw(s)
            }, i*10+500);
        }

    })

    return component;
}